<template>
	<div class="">
		<naviHeader></naviHeader>
    
    <div>
      <div class="tab">
        <div class="item" v-bind:class="{'border-bottom': selectIndex === 0}" v-on:click="selectIndex = 0; name = 'course'">课程</div>
        <div class="item" v-bind:class="{'border-bottom': selectIndex === 1}" v-on:click="selectIndex = 1; name = 'courseList'">专栏</div>
      </div>

      <div class="list-container">
        <div v-for="(item) in list" :key="item.index">
          <router-link :to="{name: name, params: {id: item.targetId}}">
            <div class="item">
              <img class="img" v-bind:src="imgBaseUrl + item.coverUrl" alt="">
              <div class="info">
                <div class="title">{{item.name}}</div>
                <!-- <div class="time">{{item.createTime}}</div> -->
                <div class="flex-item">
                  <div class="name">讲师：{{item.alias}}</div>
                  <div class="times">观看：{{item.viewNumber}}次</div>
                </div>

              </div>
              
            </div>
          </router-link>

        </div>
      </div>
    </div>
	</div>
</template>

<script>
import naviHeader from "src/components/naviHeader/naviHeader";
import {getHistoryRecord} from '../../service/getData'
import { imgBaseUrl } from "../../config/env";

export default {
  data() {
    return {
      list: [],
      name: 'course',
      courseRecord: [{
          img: "http://img4.xiazaizhijia.com/walls/20160229/1440x900_5520740209ce39b.jpg",
          title: "【公益分享】陈一筠和她的学术生涯",
          name: "曹国兰",
          times: "232"
        }],
      albumRecord: [],
      selectIndex: 0,
      imgBaseUrl: imgBaseUrl
    };
  },

  mounted() {
    this.init();
  },
  
  watch: {
    selectIndex: function() {
      switch (this.selectIndex) {
        case 0:
          this.list = this.courseRecord;
          break;
        case 1:
          this.list =  this.albumRecord;
          break;
      }
    }
  },
  components: {
    naviHeader
  },
  methods: {
    init: function () {      
      // 课程记录
      getHistoryRecord(this.$store.userToken, 'COURSE').then(res => {
        this.courseRecord = res.content
        this.list = res.content
      });      
      
      // 专栏记录
      getHistoryRecord(this.$store.userToken, 'ALBUM').then(res => {
        this.albumRecord = res.content
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";

.tab {
  @include fj(space-around);
  background: #fff;

  .item {
    height: 1rem;
    line-height: 1rem;
    width: 2rem;
    text-align: center;
  }

  .border-bottom {
    border-bottom: 2px solid #16e08f;
  }
}

.list-container {
  .item {
    @include fj(flex-start);
    background: #fff;
    border-bottom: 2px solid #f1f1f1;

    .img{
      width: 3.5rem;
      height: 2.6rem;
      padding: 0.1rem;
    }

    .info{
      padding: 0.1rem;
      width: 3.5rem;
    }

    .title{
      height: 1.8rem;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .time{
      @include sc(0.28rem, #999);
    }

    .flex-item{
      @include fj(space-between);

    }
    .name{
      @include sc(0.28rem, #999);
    }

    .times{
      @include sc(0.28rem, #999);
    }

    .info>div{
      margin-top: 0.2rem;
    }
  }
}
</style>
